<template>
	<el-container class="home_container">
		<el-header>
			<div>
		 	<span>华盛后台管理系统</span>
			</div>
			<div @click="toggleCollapse">
				<el-icon><Expand /></el-icon>
			</div>
			<el-dropdown class="userlist">
				<span class="el-dropdown-link" style="color: #fff;font-size: 20px;border-radius: 4px">
					admin
				</span>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item>修改</el-dropdown-item>
						<el-dropdown-item divided>退出</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
			<el-button type="info" @click="logout">退出</el-button>
		</el-header>
		<el-container>
			<el-aside :width="isCollapse ? '64px':'200px'">
				<el-menu
				  active-text-color="#409EFF"
				  background-color="#303133" 
				  text-color="#EBEDF0" 
				  :default-active="id.toString()" 
				  class="el-menu-vertical-demo" 
				  :router="true"
				  :collapse="isCollapse"
				  @open="handleOpen" @close="handleClose">

					<el-sub-menu  :index="item.id"  v-for="(item,index) in items" :key="index">
						<template #title>
							<el-icon>
								<component :is="item.icon"/>
							</el-icon>
							<span>{{item.name}}</span>
						</template>
						<el-menu-item  v-for="(it,inx) in item.children"  :key="inx"  :index="it.path">
							<el-icon>
								<component :is="it.icon"/>
							</el-icon>
							<span>{{it.name}}</span>
						</el-menu-item>
					</el-sub-menu>
				</el-menu>
			</el-aside>
			<el-main>
				<!-- 路由占位符 -->
				<router-view></router-view>

			</el-main>
		</el-container>
	</el-container>
</template>
<script>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	import {
		Document,
		Avatar,
		Histogram,
		Menu as IconMenu,
		Location,
		Setting,
	} from '@element-plus/icons-vue'
	export default {
		setup() {
			const router = useRouter()
			// 是否折叠
			const isCollapse = ref(false)
			const id = 1
			const items = [{
				id:'1',
				name: "管理员管理",
				icon: Avatar,
				children: [{
					id:'1-1',
					name: "管理员列表",
					path: "/alist",
					icon: Setting
				},
				{
					id:'1-2',
					name: "日志列表",
					path: "/hy",
					icon: Setting
				}]
			},
			{
				id:'2',
				name: "用户管理",
				icon: Avatar,
				children: [{
					id:'2-1',
					name: "用户列表",
					path: "/ulist",
					icon: Setting
				}]
			},
			{
				id:'3',
				name: "通用管理",
				icon: Avatar,
				children: [
				{
					id:'3-1',
					name: "车队列表",
					path: "/carlist",
					icon: Setting
				},
				{
					id:'3-2',
					name: "监管堆放点",
					path: "/jgdfd",
					icon: Setting
				},
				{
					id:'3-3',
					name: "内部堆放点",
					path: "/nbdfd",
					icon: Setting
				},
				{
					id:'3-4',
					name: "收获单位",
					path: "/shdw",
					icon: Setting
				},
				{
					id:'3-5',
					name: "货名列表",
					path: "/hmname",
					icon: Setting
				},
				]
			}
			]

			const handleOpen = (key, keyPath) => {
				console.log(key, keyPath)
			}
			const handleClose = (key, keyPath) => {
				console.log(key, keyPath)
			}
			const logout = function() {
				router.push('/login')
			}
			const toggleCollapse = function() {
			      this.isCollapse = !this.isCollapse
			    }
			return {
				handleClose,
				handleOpen,
				logout,
				items,
				router,
				isCollapse,
				toggleCollapse,
				id
			}
		}
	}
</script>




<style lang="scss" scoped>
	.home_container {
		height: 760px;
	}

	.userlist {
		margin-left: 74%;
	}

	.el-header {
		background-color: #000000
;
		// 给头部设置一下弹性布局
		display: flex;
		// 让它贴标左右对齐
		justify-content: space-between;
		// 清空图片左侧padding
		padding-left: 0;
		// 按钮居中
		align-items: center;
		// 文本颜色
		color: #fff;
		// 设置文本字体大小
		font-size: 20px;

		// 嵌套
		>div {
			// 弹性布局
			display: flex;
			// 纵向上居中对齐
			align-items: center;

			// 给文本和图片添加间距，使用类选择器
			span {
				margin-left: 15px;
			}
		}
	}
	.el-menu-item.is-active {
	   background-color: rgb(48,105,132) !important;//你要修改的颜色
	}
	.el-aside {
		background-color: #313743;
	}

	.el-main {
		background-color: #e9edf1;
	}

	.example-showcase .el-dropdown-link {
		cursor: pointer;
		font-size: 20px;
		color: #fff;
		display: flex;
		align-items: center;
	}
</style>
